<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


  <!-- <link rel="stylesheet" href="../../css/sm.min.css">
  <link rel="stylesheet" href="../../css/sm-extend.min.css">
  <script type="text/javascript" src="../../common/common.js"></script> -->
  
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/common/common.js"></script>
  <style>
    .infinite-scroll-preloader {
        margin-top:-20px;
    }

  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">
     
        <header class="bar bar-nav">
            <button class="button button-link button-nav pull-left">
              <span class="icon icon-left"></span>
              <!-- 返回 -->
            </button>
            <!-- <button class="button button-link button-nav pull-right">
              下一步
              <span class="icon icon-search"></span>
            </button> -->
            <h1 class="title">我的优惠券</h1>
        </header>

      <!-- 页面内容区域 -->
      <div class="content" data-type="">
          <div class="buttons-tab fixed-tab" data-offset="44">
            <a href="#tab1" class="tab-link active button">未使用（3）</a>
            <a href="#tab2" class="tab-link button">已使用（3）</a>
            <a href="#tab3" class="tab-link button">已过期（3）</a>
          </div>
      
          <div class="tabs">
            <div id="tab1" class="tab active">
                <!-- <div class="list-block">
                    <ul class="list-container">
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                     ....
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    </ul>
                </div> -->
                <div class="list-block media-list">
                    <ul style="background:rgb(243, 243, 243);">
                      <li style="margin:6px 10px;background-color: white;">
                        <div class="item-content">
                          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                          <div class="item-inner">
                            <div class="item-title-row">
                              <div class="item-title">仅限济南中心店使用</div>
                              <div style="font-size:10px;">快过期</div>
                            </div>
                            <div class="item-subtitle">2018.08.12-2018.08.30</div>
                          </div>
                        </div>
                      </li>
                      <li style="margin:6px 10px;background-color: white;">
                          <div class="item-content">
                            <div class="item-media">
                              <div style="width:44px;height:44px;font-size: 8px;background-color: rgb(235, 235, 235)">中心店体验卷</div>
                            </div>
                            <div class="item-inner">
                              <div class="item-title-row">
                                <div class="item-title">仅可购买生态保养系列</div>
                                <div style="font-size:10px;"></div>
                              </div>
                              <div class="item-subtitle">2018.08.12-2018.08.30</div>
                            </div>
                          </div>
                        </li>
                        <li style="margin:6px 10px;background-color: white;">
                            <div class="item-content">
                              <div class="item-media">
                                  <div style="width:44px;height:44px;font-size: 8px;background-color: rgb(235, 235, 235)">
                                    <span>￥80</span>
                                    <span>满500可用</span>
                                  </div>
                              </div>
                              <div class="item-inner">
                                <div class="item-title-row">
                                  <div class="item-title">仅限济南中心店使用</div>
                                  <div style="font-size:10px;">快过期</div>
                                </div>
                                <div class="item-subtitle">2018.08.12-2018.08.30</div>
                              </div>
                            </div>
                          </li>
                    </ul>
                  </div>
                  <!-- 加载提示符 -->
                  <!-- <div class="infinite-scroll-preloader">
                    <div class="preloader">
                    </div>
                  </div> -->
            </div>
            <div id="tab2" class="tab infinite-scroll">
                <!-- <div class="list-block">
                  <ul class="list-container">
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                   ....
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                  </ul>
                </div> -->
                <div class="list-block media-list">
                    <ul style="background:rgb(243, 243, 243);">
                      <li style="margin:6px 10px;background-color: white;">
                        <div class="item-content">
                          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                          <div class="item-inner">
                            <div class="item-title-row">
                              <div class="item-title">仅限济南中心店使用</div>
                              <div style="font-size:10px;">快过期</div>
                            </div>
                            <div class="item-subtitle">2018.08.12-2018.08.30</div>
                          </div>
                        </div>
                      </li>
                      <li style="margin:6px 10px;background-color: white;">
                          <div class="item-content">
                            <div class="item-media">
                              <div style="width:44px;height:44px;font-size: 8px;background-color: rgb(235, 235, 235)">中心店体验卷</div>
                            </div>
                            <div class="item-inner">
                              <div class="item-title-row">
                                <div class="item-title">仅可购买生态保养系列</div>
                                <div style="font-size:10px;"></div>
                              </div>
                              <div class="item-subtitle">2018.08.12-2018.08.30</div>
                            </div>
                          </div>
                        </li>
                        <li style="margin:6px 10px;background-color: white;">
                            <div class="item-content">
                              <div class="item-media">
                                  <div style="width:44px;height:44px;font-size: 8px;background-color: rgb(235, 235, 235)">
                                    <span>￥80</span>
                                    <span>满500可用</span>
                                  </div>
                              </div>
                              <div class="item-inner">
                                <div class="item-title-row">
                                  <div class="item-title">仅限济南中心店使用</div>
                                  <div style="font-size:10px;">快过期</div>
                                </div>
                                <div class="item-subtitle">2018.08.12-2018.08.30</div>
                              </div>
                            </div>
                          </li>
                    </ul>
                  </div>
                <!-- 加载提示符 -->
                <!-- <div class="infinite-scroll-preloader">
                  <div class="preloader">
                  </div>
                </div> -->
            </div>
            <div id="tab3"  class="tab infinite-scroll">
                <!-- <div class="list-block">
                  <ul class="list-container">
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                   ....
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                  </ul>
                </div> -->
                <div class="list-block media-list">
                    <ul style="background:rgb(243, 243, 243);">
                      <li style="margin:6px 10px;background-color: white;">
                        <div class="item-content">
                          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                          <div class="item-inner">
                            <div class="item-title-row">
                              <div class="item-title">仅限济南中心店使用</div>
                              <div style="font-size:10px;">快过期</div>
                            </div>
                            <div class="item-subtitle">2018.08.12-2018.08.30</div>
                          </div>
                        </div>
                      </li>
                      <li style="margin:6px 10px;background-color: white;">
                          <div class="item-content">
                            <div class="item-media">
                              <div style="width:44px;height:44px;font-size: 8px;background-color: rgb(235, 235, 235)">中心店体验卷</div>
                            </div>
                            <div class="item-inner">
                              <div class="item-title-row">
                                <div class="item-title">仅可购买生态保养系列</div>
                                <div style="font-size:10px;"></div>
                              </div>
                              <div class="item-subtitle">2018.08.12-2018.08.30</div>
                            </div>
                          </div>
                        </li>
                        <li style="margin:6px 10px;background-color: white;">
                            <div class="item-content">
                              <div class="item-media">
                                  <div style="width:44px;height:44px;font-size: 8px;background-color: rgb(235, 235, 235)">
                                    <span>￥80</span>
                                    <span>满500可用</span>
                                  </div>
                              </div>
                              <div class="item-inner">
                                <div class="item-title-row">
                                  <div class="item-title">仅限济南中心店使用</div>
                                  <div style="font-size:10px;">快过期</div>
                                </div>
                                <div class="item-subtitle">2018.08.12-2018.08.30</div>
                              </div>
                            </div>
                          </li>
                    </ul>
                  </div>
                <!-- 加载提示符 -->
                <!-- <div class="infinite-scroll-preloader">
                  <div class="preloader">
                  </div>
                </div> -->
            </div>
          </div>
        </div>
      




    </div>
  </div>
  <!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/swiper/swiper.min.js"></script>
<script type="text/javascript">
  

  //放函数区域

  // 无限滚动
  // 加载flag
  var loading = false;
  // 最多可加载的条目
  var maxItems = 100;
  // 每次加载添加多少条目
  var itemsPerLoad = 20;
  function addItems(number, lastIndex) {
          // 生成新条目的HTML
          var html = '';
          for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
              html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
          }
          // 添加新条目
          $('.infinite-scroll-bottom .list-container').append(html);
      }
      //预先加载20条
  addItems(itemsPerLoad, 0);
  // 上次加载的序号
  var lastIndex = 20;
  // 注册'infinite'事件处理函数
  $(document).on('infinite', '.infinite-scroll-bottom',function() {
      // 如果正在加载，则退出
      if (loading) return;
      // 设置flag
      loading = true;
      // 模拟1s的加载过程
      setTimeout(function() {
          // 重置加载flag
          loading = false;
          if (lastIndex >= maxItems) {
              // 加载完毕，则注销无限加载事件，以防不必要的加载
              $.detachInfiniteScroll($('.infinite-scroll'));
              // 删除加载提示符
              $('.infinite-scroll-preloader').remove();
              return;
          }
          // 添加新条目
          addItems(itemsPerLoad, lastIndex);
          // 更新最后加载的序号
          lastIndex = $('.list-container li').length;
          //容器发生改变,如果是js滚动，需要刷新滚动
          $.refreshScroller();
      }, 1000);
  });






  //需要初始化传递数据的函数，函数名，跟参数都不要变，固定写死的
  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     /*var jodata = JSON.parse(data); 
     if(isNotNull(jodata)){//
        
     }*/
     if(isNotNull(data)){
        // $$("#div_version").html("版本号：V"+data);
     }
  }



  	
    // 初始化
    $(function(){
      $.init();
    });
  </script>
</body>
</html>